/** @jsx jsx */
import { jsx } from "@emotion/react";
import { useState } from "react";
import React from "react";
import { Form, Input, Select } from "antd";

export interface User {
  id?: string;
  name?: string;
  email?: string;
  title?: string;
  organization?: string;
  token?: string;
  tips?: string;
}
interface SearchPanelProps {
  users: User[];
  param: {
    name: string;
    personId: string;
  };
  setparam: (param: SearchPanelProps["param"]) => void;
}
export const SearchPanel = ({ setparam, param, users }: SearchPanelProps) => {
  return (
    <Form
      layout={"inline"}
      style={{ alignItems: "center", marginBottom: "2rem" }}
    >
      <Form.Item>
        <Input
          placeholder={"项目名"}
          style={{ margin: "20px auto", width: "250px" }}
          type={"text"}
          value={param.name}
          onChange={(evt) => setparam({ ...param, name: evt.target.value })}
        ></Input>
      </Form.Item>
      <Form.Item>
        <Select
          value={param.personId}
          onChange={(value) =>
            setparam({
              ...param,
              personId: value,
            })
          }
        >
          <Select.Option value={""}>负责人</Select.Option>
          {users.map((item) => {
            return (
              <Select.Option key={item.id} value={String(item.id)}>
                {item.name}
              </Select.Option>
            );
          })}
        </Select>
      </Form.Item>
    </Form>
  );
};
